<%--
  Created by IntelliJ IDEA.
  User: lt
  Date: 2019/3/8
  Time: 10:50
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://shiro.apache.org/tags" prefix="shiro" %>
<c:set var="contextPath" value="${pageContext.request.contextPath}"></c:set>
<c:set var="shopId" value="${pageContext.request.getParameter('shopId')}"></c:set>
<c:set var="userId" value="${pageContext.request.getParameter('userId')}"></c:set>
<c:set var="totalPrice" value="${pageContext.request.getParameter('totalPrice')}"></c:set>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Excel 入库</title>
    <%--<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">--%>
    <%--<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>--%>
    <%--<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>--%>

    <jsp:include page="../head.jsp"></jsp:include>
    <style type="text/css">
        .container-horization-vertical {
            /*position: relative;*/
            text-align: center;
            /*width: 100%;*/
            /*height: 200px;*/
            /*background: deepskyblue;*/
            /*margin-bottom: 20px;*/
        }

        .container-horization-vertical-item1 {
            /*position: absolute;*/
            width: 135px;
            height: 30px;
            color: #FFFFFF;
            background: #BBBCBF;
            line-height: 30px;
            text-align: center;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;
        }

        .container-horization-vertical-item2 {
            /*position: absolute;*/
            width: 135px;
            height: 30px;
            color: #FFFFFF;
            background: #017457;
            line-height: 30px;
            text-align: center;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;
        }


        .inputfile {
            width: 0.1px;
            height: 0.1px;
            opacity: 0;
            overflow: hidden;
            position: absolute;
            z-index: -1;
        }

        .inputfile + label {
            font-size: 1.00em;
            font-weight: 700;
            color: white;
            padding: 4px;
            background-color: #3386b7;
            display: inline-block;
        }

        .inputfile:focus + label,
        .inputfile + label:hover {
            padding: 4px;
            background-color: #3392b7;
        }

        .inputfile + label {
            cursor: pointer; /* "hand" cursor */
        }

        .inputfile:focus + label {
            outline: 1px dotted #000;
            outline: -webkit-focus-ring-color auto 5px;
        }

        .inputfile + label * {
            pointer-events: none;
        }
    </style>
</head>
<body style="background-color: #e1e2e6;">
<div class="row" style="width: 100%;">
    <div style="text-align: center; margin-top: 165px; margin-bottom: 30px;">
        <img src="${contextPath}/static/image/excelInstock/12.png" style="width: 128px;">
    </div>
    <div class="container-horization-vertical">
        <label class="container-horization-vertical-item1"><a href="http://clouderp.skystorechain.com:20080/web/execl/Excel入库模块.xls">模版下载</a></label>
        <label class="" style="margin-left: 25px;">
            <%--<input type="file" name="excelInput">--%>
            <input type="file" name="excelInput" id="file_input" class="inputfile"/>
            <label id="file_input_label" for="file_input"><i class="ace-icon fa fa-folder-open"></i> 请选择Excel文件</label>
        </label>
        <label class="container-horization-vertical-item2" style="margin-left: 25px;" onclick="uploadExcel()">导入Excel入库单</div>
    </div>
</div>
<%--<form class="form-inline" role="form">--%>
    <%--<input type="file" name="excelInput" style="margin-top: 20px;">--%>
    <%--<button type="button" class="btn btn-default" onclick="uploadExcel()">提交</button>--%>
<%--</form>--%>

<script>
    var uploadExcel = function () {
        var excel = $("#file_input")[0].files[0];

        console.log(excel.name)
        console.log(excel)

        if (excel == undefined) {
            layer.msg("请选择excel文件")
            return
        }
        if (excel.name.substr(excel.name.lastIndexOf('.')) != '.xls') {
            layer.msg("选择的文件不是excel类型")
            return
        }
        if (excel.size > 1048576) {
            layer.msg("选择的excel大于1Mb")
            return
        }

        var fm = new FormData();
        fm.append('excel', excel);
        fm.append('userId', '${userId}');
        fm.append('shopId', '${shopId}');
        fm.append("totalPrice","${totalPrice}");
        layer.load(1)
        $.ajax(
            {
                url: '${contextPath}/ktPurchase/saveExcelInstockOrder',
                type: 'POST',
                data: fm,
                contentType: false, //禁止设置请求类型
                processData: false, //禁止jquery对DAta数据的处理,默认会处理
                //禁止的原因是,FormData已经帮我们做了处理
                success: function (data) {
                    //测试是否成功
                    //但需要你后端有返回值
                    //console.log(data);
                    if (data.success) {
                        //console.log(data.data);
                        $('#getResultFileNameInput').val(data.data)
                        layer.msg('上传成功--详情请到入库清单查看');
                    } else {
                        layer.msg('上传失败，稍后再试');
                    }
                    layer.closeAll('loading')
                },
                error: function (error) {
                    layer.msg("网络连接失败");
                    layer.closeAll('loading')
                }
            }
        );
    }

    var input = document.getElementById("file_input");
    if (typeof(FileReader) === 'undefined') {
        alert("抱歉，你的浏览器不支持 FileReader，请使用现代浏览器操作！");
        input.setAttribute('disabled', 'disabled');
    } else {
        input.addEventListener('change', readFile, false);
    }

</script>

</body>
</html>